<template>
  <div class="page gray-page">
    <nav-bar title="基础信息审核"></nav-bar>
    <div class="list-main page-main" style="margin-top: 44px">
      <van-sticky :offset-top="44">
        <van-tabs v-model="searchForm.baseType" @click="getList(1)">
          <van-tab :title="item.description" :name="item.code" v-for="(item, key) in tabOptions" :key="key"></van-tab>
        </van-tabs>
      </van-sticky>
      <van-sticky class="page-scroll" :offset-top="96">
        <van-pull-refresh v-model="refreshing" style="min-height: 100%" @refresh="getList(1)">
          <template v-if="listData.length">
            <van-list
              v-model="loading"
              :finished="finished"
              :immediate-check="false"
              :error.sync="error"
              error-text="请求失败，点击重新加载"
              finished-text="没有更多了~"
              @load="getList"
            >
              <!-- approveState 0 待审核、1：通过、2：驳回 -->
              <gb-card
                border
                class="list-item"
                v-for="(item, key) in listData"
                :key="key"
                :color="baseColor[searchForm.baseType]"
              >
                <item-template
                  :item="item"
                  :baseType="searchForm.baseType"
                  queryType="2"
                  type="Approve-collection"
                ></item-template>
              </gb-card>
            </van-list>
          </template>
          <template v-else>
            <van-empty
              :image="require('@/assets/images/basic/pic_no_content.png')"
              description="暂无内容~"
              style="height: 300px"
            />
          </template>
        </van-pull-refresh>
      </van-sticky>
    </div>
  </div>
</template>
<script>
import List from '@/mixins/list'
import Resident from '@/api/resident'
import ItemTemplate from '@/components/Widget/Resident/List/template'
export default {
  mixins: [List],
  components: {
    ItemTemplate
  },
  data() {
    return {
      tabOptions: [
        {
          code: '1',
          description: '本地人员'
        },
        {
          code: '2',
          description: '非本地人员'
        },
        {
          code: '3',
          description: '境外人员'
        },
        {
          code: '8',
          description: '车辆信息'
        },
        {
          code: '9',
          description: '宠物信息'
        }
      ],
      baseColor: {
        1: '#3CBDD0',
        2: '#37C2BB',
        3: '#E28556',
        4: '#E2AB56',
        5: '#E25656',
        6: '#E28556',
        7: '#3B71DA',
        8: '#37C2BB',
        9: '#E2AB56',
        10: '#3B99DA'
      },
      searchForm: {
        baseType: this.$route.query.baseType,
        pageNumber: 1,
        recordSize: 0,
        pageSize: 10
      },
      api: Resident.Audit
    }
  },
  created() {
    this.getList()
  }
}
</script>
<style scoped lang="less">
@import '~@/assets/style/list.less';
</style>
